<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="author" content="Cassie">
  <!-- ie浏览器使用最新的edge引擎渲染页面 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="keywords" content="Notes">
  <title>Cassie_Notessix_homework</title>
  <link rel="shortcut icon" href="../../images/logo.ico"/>
  <!-- link bootstrap -->
  <link rel="stylesheet" href="../../css/bootstrap.min.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"/></script>
  <script src="../../js/bootstrap.min.js"></script> 
  <style>
    body{
    background-color: #f7f3ee!important;
    color: #948c76!important;
    
    /* #e0cc96 */
    }
  </style>
 </head>
 <body>
     <!-- exp：<code> </code>-->
   <div class="container">
        <form class="horizontal">
            <div class="form-group">
                <div class="col-md-10">
                    <label class="checkbox-inline">
                        <input type="checkbox" value="0" name="love" id="love1">我
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" value="1" name="love" id="love2">真
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" value="2" name="love" id="love3">的
                    </label>
                    <label class="checkbox-inline">
                        <input type="checkbox" value="3" name="love" id="love4">帅
                    </label>
                </div>	
            </div>
            <div class="form-group">
                <div class="col-md-10">
                    <input type="button" id="sAll" class="btn btn-info" value="全选" name="">
                    <input type="button" id="cancel" class="btn btn-default" value="取消" name="">
                    <input type="button" id="reserve" class="btn btn-warning" value="反选" name="">
                </div>	
            </div>
        </form>
    </div>
    <script>
    let inpts = $('input[name=love]');
	$('#sAll').click(function() {
		for(var i=0;i<inpts.length;i++) {
			inpts.eq(i).prop('checked',true);
		}
	});
	$('#cancel').click(function() {
		for(var i=0;i<inpts.length;i++) {
			inpts.eq(i).prop('checked',false);
		}
	});
	$('#reserve').click(function() {
		for(var i=0;i<inpts.length;i++) {
			inpts.eq(i).prop('checked',!inpts.eq(i).prop('checked'));
		}
	});
    </script>
  </body>
</html>